import { Suspense } from 'react';

import { renderRoutes, RouteConfigComponentProps } from 'react-router-config';

import { Layout } from 'antd';
import {
  DesktopOutlined, EyeOutlined, FileDoneOutlined, SettingOutlined
} from '@ant-design/icons';

import AntdRouterMenu, {
  MenuItem,
} from '@components/Antd-router-menu';
import PageLoading from '../../components/page-loading';
import useAuthGuide from './hooks';
import styles from './style.module.less';

const { Content, Footer, Sider } = Layout;
/**
 * 配置导航栏链接和文字
 */
const MENU_DATA = [
  new MenuItem('/home/answerSetting', '纸质录入', <DesktopOutlined />),
  new MenuItem('/home/answerList', '回答查看', <EyeOutlined />),
  new MenuItem('/home/questionnaireSettings', '问卷设置', <FileDoneOutlined />),
  new MenuItem('/home/changePassword', '修改密码', <SettingOutlined />),
];

export default ({ route }: RouteConfigComponentProps) => {
  useAuthGuide();
  return (
    <Layout>
      <Sider
        theme="dark"
        className={styles['home-sider']}
        breakpoint="lg"
        collapsedWidth="0"
      >
        <div className={styles['home-soder-head']}>
          <span className="logo" />
          测试录入系统
        </div>
        <AntdRouterMenu menuData={MENU_DATA} />
      </Sider>
      <div className={styles['home-content-box']}>
        <Suspense fallback={<PageLoading />}>
          <Content className={styles['home-content']}>
            {renderRoutes(route?.routes)}
          </Content>
        </Suspense>
        <Footer>code@Eric design@Luna</Footer>
      </div>
    </Layout>
  );
};
